<template>
    <div>
        <HeaderTop :title="title">
            <i class="iconfont icon-zuojiantou" slot="left" @click="goback"></i>
        </HeaderTop>
        <div class="main">
            <a href='javascript:' class="my_list">
              <div class="left">
                  头像
              </div>
              <div class="right">
                  <label for="wx">
                    <img id="skm" :src="imgUrl||require('./images/missing-face.png')" alt />
                  </label>
                  <input type="file" style="display:none;" name id="wx" ref="wei" @change="renderImg" />
              </div>
            </a>
            <a href='javascript:' class="my_list">
              <div class="left">
                  昵称
              </div>
              <div class="right">
                  {{userInfo.name}}
              </div>
            </a>
            <!--    <a href='javascript:' class="my_list">
          <div class="left">
                  用户名
              </div>
              <div class="right">
              </div> 
            </a>-->
            <mt-field label="用户名" placeholder="输入手机号码" type="tel" v-model="phone"></mt-field>
            <a href='javascript:' class="my_list">
              <div class="left">
                  性别
              </div>
              <div class="right">
                  男
              </div>
            </a>
            <a href='javascript:' class="my_list">
              <div class="left">
                  籍贯
              </div>
              <div class="right">
                  
              </div>
            </a>
            <mt-button type="primary" style="width:80%;margin:30px 10%;" @click="submit">保存</mt-button>
        </div>
    </div>
</template>

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
  import {uploadImg,editUserInfo } from '../../api'
  import "../../../public/upload.js";
  import {mapState} from 'vuex'
    export default {
        computed: {
          ...mapState(['userInfo'])
        },
        data() {
            return {
                title:"编辑个人信息",
                skm:'',
                imgUrl:"",
                phone:'',
            };
        },
        methods: {
            goback(){
                this.$router.back(-1)
            },
            renderImg(files) {
              // 获取文件
              let file = this.$refs.wei.files[0];
              console.log(file);
              var that=this;
              this.$compression(file, 0.5).then((res) => {
                const f = res.file;
                let data = new FormData();
                data.append("file",f);
                uploadImg(data ,{headers: { "Content-Type": false}}).then((res)=>{
                    if(res.code==0){
                        that.imgUrl="http://localhost:4000"+res.data
                    }else{
                        Toast("上传失败")
                    }
                }
                );
              })
            },
            submit(){
                const {phone,imgUrl}=this
                // console.log(phone)
                let data={phone:phone,img:imgUrl}
               editUserInfo(data).then((res)=>{
                   console.log(res)
                   if(res.code==0){
                       this.$router.back(-1)
                   }
               })
            }
            
        },
        components:{
            HeaderTop
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .main
      // position fixed
      // top 50px 
      // bottom 0
      // left 0
      // right 0
      width 100%
      padding-top 50px
    .my_list 
     display block
     min-width 60%
     background #fff
     padding 10px 15px
     display flex 
     justify-content space-between
     .left 
       align-self center
     .right
       img
         display block
         width 50px
         height 50px
         border-radius:50%
     
</style>
